<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lazyload</title>
    <style>
        html,body{
            margin: 0;
            padding:0;
        }
        .scroll-con{
            height: 500px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="scroll-con">
        <p>这是一样内容，，啊实打实的撒大苏打阿斯弗阿斯弗安抚阿斯弗啊实打实大苏打实打实大苏打卢卡斯肯德基案例开始对接了喀什角动量卡送进来的就爱上了大家拉山口记得啦时间离开大家拉山口觉得拉克斯基的拉萨角度来看案件数量打开就阿拉山口大家了喀什角动量咯技术的卢卡斯交流的空间阿斯利康大家拉克斯基道路喀什就的绿卡就是了肯德基案例上课角度来看按时间道路喀什就离开就爱上了看的就拉开圣诞节卢卡斯觉得绿卡的撒
        </p>
        <p>这是一样内容，，啊实打实的撒大苏打阿斯弗阿斯弗斯弗安抚阿斯弗啊实打实大苏打实打实大苏打卢卡斯肯德基案例开始对接了喀什角动量卡送进来的就爱上了大家拉山口记得啦时间离开大家拉山口觉得拉克斯基的拉萨角度来看案件数量打开就阿拉山口大家了喀什角动量咯技术的卢卡斯交流的空间阿斯利康大家拉克斯基道路喀什就的绿卡就是了肯德基案例上课角度来看按时间道路喀什就离开就爱上了看的就拉开圣诞节卢卡斯觉得绿卡的安抚阿斯弗
        </p>
        <p>这是一样内容，，啊实打实的撒大苏打阿斯弗斯弗安抚阿斯弗啊实打实大苏打实打实大苏打卢卡斯肯德基案例开始对接了喀什角动量卡送进来的就爱上了大家拉山口记得啦时间离开大家拉山口觉得拉克斯基的拉萨角度来看案件数量打开就阿拉山口大家了喀什角动量咯技术的卢卡斯交流的空间阿斯利康大家拉克斯基道路喀什就的绿卡就是了肯德基案例上课角度来看按时间道路喀什就离开就爱上了看的就拉开圣诞节卢卡斯觉得绿卡的阿斯弗安抚阿斯弗
        </p>
        <p>这是一样内容，，啊实打实的撒大苏打阿斯弗斯弗安抚阿斯弗啊实打实大苏打实打实大苏打卢卡斯肯德基案例开始对接了喀什角动量卡送进来的就爱上了大家拉山口记得啦时间离开大家拉山口觉得拉克斯基的拉萨角度来看案件数量打开就阿拉山口大家了喀什角动量咯技术的卢卡斯交流的空间阿斯利康大家拉克斯基道路喀什就的绿卡就是了肯德基案例上课角度来看按时间道路喀什就离开就爱上了看的就拉开圣诞节卢卡斯觉得绿卡的阿斯弗安抚阿斯弗
        </p>
        <img data-src="https://tse1-mm.cn.bing.net/th/id/OET.0042d793d9eb45b88d17b29115bc0071?w=135&h=272&c=7&rs=1&o=5&dpr=1.5&pid=1.9"
            class="scroll-con-img">
        <img data-src="https://tse1-mm.cn.bing.net/th/id/OET.2b797842268047579aadc86ab134c1a1?w=135&h=272&c=7&rs=1&o=5&dpr=1.5&pid=1.9"
            class="scroll-con-img">
        <img data-src="https://tse1-mm.cn.bing.net/th/id/OET.3e4943c6e0bf423e9bcf104e128ecd16?w=135&h=272&c=7&rs=1&o=5&dpr=1.5&pid=1.9"
            class="scroll-con-img">
    </div>
    <script>
        const con = document.querySelector('.scroll-con')
        const imgs = document.querySelectorAll('.scroll-con-img')
        con.addEventListener('scroll', () => {
            imgs.forEach(img=> {
                const imgTop = img.getBoundingClientRect().top;
                const conTop = con.getBoundingClientRect().top;
                if (imgTop - conTop <= con.clientHeight) {
                    const src = img.getAttribute('data-src')
                    img.setAttribute('src', src)
                }
            })
        })
    </script>
</body>
</html>